import React, { Component } from 'react'
import {
  PieChart, Pie, Legend, Cell, ResponsiveContainer, Sector,
} from 'recharts'

const colors = ['#21ba45', '#fbbd08', '#db2828']

const data01 = [
  { name: 'Completed', value: 400, v: 89 },
  { name: 'Unfinished', value: 300, v: 100 },
  { name: 'contentious', value: 200, v: 200 },
]

const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180
  const {
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    fill,
    payload,
    percent,
  } = props
  const sin = Math.sin(-RADIAN * midAngle)
  const cos = Math.cos(-RADIAN * midAngle)
  const sx = cx + (outerRadius + 10) * cos
  const sy = cy + (outerRadius + 10) * sin
  const mx = cx + (outerRadius + 30) * cos
  const my = cy + (outerRadius + 30) * sin
  const ex = mx + (cos >= 0 ? 1 : -1) * 22
  const ey = my
  const textAnchor = cos >= 0 ? 'start' : 'end'

  return (
    <g>
      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
        {payload.name}
      </text>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={outerRadius + 6}
        outerRadius={outerRadius + 10}
        fill={fill}
      />
      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">
        {`Count ${payload.value}`}
      </text>
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
        {`(percent: ${(percent * 100).toFixed(2)}%)`}
      </text>
    </g>
  )
}

export default class Demo extends Component {
  static displayName = 'PieChartDemo'

  onPieEnter = (data, index, e) => {
    this.setState({
      activeIndex: index,
    })
  }

  state = {
    activeIndex: 0,
    animation: false,
  }

  handleChangeAnimation = () => {
    this.setState({
      animation: !this.state.animation,
    })
  }

  handleEnter = (e, activeIndex) => this.setState({ activeIndex })

  handleLeave = () => this.setState({ activeIndex: -1 })

  render() {
    const { data } = this.props
    console.log(colors)
    return (
      <div className="pie-charts" style={{ width: '100%', height: '400px' }}>
        <div
          className="pie-chart-wrapper"
          style={{ width: '100%', height: '100%', backgroundColor: '#ffffff' }}
        >
          {data && (
            <ResponsiveContainer>
              <PieChart>
                <Legend />
                <Pie
                  data={data}
                  dataKey="value"
                  innerRadius="35%"
                  outerRadius="50%"
                  activeIndex={this.state.activeIndex}
                  activeShape={renderActiveShape}
                  onMouseEnter={this.onPieEnter}
                  isAnimationActive={false}
                >
                  {data01.map((entry, index) => (
                    <Cell key={`slice-${index}`} fill={colors[index % 10]} />
                  ))}
                </Pie>
              </PieChart>
            </ResponsiveContainer>
          )}
        </div>
      </div>
    )
  }
}
